<template>
  <div id="login">
    <!-- 中心部分 -->
    <div class="center">
      <div class="cBox">
        <div class="boxLeft">
          <div class="imgage">
            <img src="../assets/images/logoText.png">
          </div>  
          <div class="text">
            <p>供应链金融服务系统</p>
            <img src="../assets/images/logins.jpg" style="width:72%">
          </div>
        </div>
        <div class="boxRight">
          <p class="title">用户登录 </p>
          <div class="account sw">
            <span class="span"><span>账</span><span>号</span></span>
            <el-input placeholder="请输入手机号或邮箱" v-model="accout"></el-input>
          </div>
          <div class="paw sw">
            <span class="span"><span>密</span><span>码</span></span>
            <el-input placeholder="请输入密码" v-model="pass" type='password'></el-input>
          </div>
          <div class="remember">
            <el-checkbox v-model="isremember"></el-checkbox>
            <span>记住我</span></div>
          <div class="btn" @click="login">登 录</div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <!-- <foot></foot> -->
  </div>
</template>

<script>

export default {
  name: 'login',
  // components: {foot},
  data () {
    return {
      accout: '',
      pass: '',
      isremember: false
    };
  },
  methods: {
    login () {
       if (!this.accout || !this.pass) {
        this.$message({message: '您输入的账号/密码有误，请重新输入', type: 'warning'});
        return
      }
      let param = {
        phone: this.accout,
        password: this.pass
      }
      this.$api.adminLogin(param).then(({data}) => {
        this.$message({
          type: 'success',
          message: '登陆成功'
        })
        sessionStorage.setItem('token', data.data.token)
        sessionStorage.setItem('user', JSON.stringify(data.data.user));
        this.rememberMe(this.isremember);
        this.$router.push('/home');
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '登陆失败，请重新登陆'
        })
      })
    },
    rememberMe(val) {
      if(val) {
        localStorage.removeItem('user')
        let user = {
          account: this.accout,
          password: this.pass,
          isremember: this.isremember
        }
        localStorage.setItem('user', JSON.stringify(user))
      } else {
        localStorage.removeItem('user')
      }
    },
  },
  mounted() {
    let user = localStorage.getItem('user')
    if(user) {
      user = JSON.parse(user)
      this.accout = user.account
      this.pass = user.password
      this.isremember = user.isremember
    }
  }
};
</script>

<style lang="scss" scoped>
  #login {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(../assets/images/loginbg.png);
    background-position: center center;
    background-size: cover;
    .center {
      position: absolute;
      width:900px;
      height:524px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      box-sizing: border-box;
      padding: 10px;
      .cBox {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        background: white;
        .boxLeft {
          float: left;
          width: 42%;
          height: 100%;
          display: flex;
          border-right: 1px solid #e9e9e9;
          box-sizing: border-box;
          flex-direction: column;

          .imgage{
            margin-top: 50px;
            margin-left: 40px;
          }
          .text {
            margin-top: 20px;
            text-align: center;
            p {
              font-size:24px;
              position: relative;
              top:-30px;
              font-weight:400;
              color:rgba(70,70,70,1);
              line-height:44px;
              margin-top: 30px;
            }
          }
        }
        .boxRight {
          float: right;
          width: 55%;
          height: 100%;
          padding: 62px;
          box-sizing: border-box;
          .title {
            font-size:24px;
            font-weight:bold;
            color:black;
            line-height:20px;
            margin-top: 40px;
          }
          .sw {
            display: flex;
            .span {
              width: 20%;
              display: flex;
              justify-content: space-between;
              line-height: 40px;
              margin-right: 20px;
              font-size:18px;
              color:rgba(100,100,100,1);
            }
            &.account {
              margin-top: 60px;
            }
            &.paw {
              margin-top: 35px;
            }
          }
          .remember {
            margin-top: 40px;
            .el-checkbox{
              margin-right: 4px;
            }
            span {
              cursor: pointer;
              font-size:14px;
              
              font-weight:400;
              color:rgba(102,102,102,1);
              line-height:20px;
            }
          }
          .btn {
            width:80%;
            height:44px;
            background:rgba(242,146,7,1);
            text-align: center;
            font-size:22px;
            border-radius: 6px;
            margin: 0 auto;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height: 44px;
            margin-top: 30px;
            cursor: pointer;
          }
        }
      }
    }
    /deep/ #foot {
      background:rgba(0,0,18,.5) !important;
    }
  }
</style>
